<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
      <div id="container">
        <h1>热卖图书销售表</h1>
        <table class="style-table">
          <thead>
            <tr>
              <th>书名</th>
              <th>数量</th>
              <th>价格</th>
              <th>总价</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>蛤蟆先生去看心理医生</td>
              <td>50</td>
              <td>￥38</td>
              <td>1900</td>
              <td>
                <input
                  type="button"
                  name=""
                  id=""
                  value="修改数量"
                  onclick="changeOper(this)"
                />
                <input
                  type="button"
                  name=""
                  id=""
                  value="删除信息"
                  onclick="delectOper(this)"
                />
              </td>
            </tr>
            <tr align="center">
              <td>活着</td>
              <td>28</td>
              <td>￥45</td>
              <td>1260</td>
              <td>
                <input type="button" value="修改数量" onclick="changeOper(this)" />
                <input type="button" value="删除信息" onclick="delectOper(this)" />
              </td>
            </tr>
            <tr align="center">
              <td>你当像鸟飞往你的山</td>
              <td>15</td>
              <td>￥35</td>
              <td>525</td>
              <td>
                <input type="button" value="修改数量" onclick="changeOper(this)" />
                <input type="button" value="删除信息" onclick="delectOper(this)" />
              </td>
            </tr>
          </tbody>
        </table>
        <div class="add">
          <h3>添加订单</h3>
          <h6>
            书名：<input type="text" name="" id="bookName" placeholder="请输入书名" />
          </h6>
          <h6>
            数量：<input type="text" name="" id="num" class="inputNum" />
            单价：<input type="text" name="" id="price" class="inputNum" />
          </h6>
          <button id="addBtn">增加订单</button>
        </div>
      </div>
      <script>
         //定义函数：获取页面元素
         function $(selector){
          return document.querySelector(selector);
        }
        //添加订单
        //1.获取增加订单按钮，添加点击事件
        $('#addBtn').onclick = function(){
          //2.获取用户输入的内容
          var bookName = $('#bookName').value;
          var num = $('#num').value;
          var price = $('#price').value;
          //3.获取表格对象
          var table = $('.style-table');
          //4.通过表格对象创建行对象
          var tr = table.insertRow(-1);
          //5.通过行对象创建单元格对象
          var td1 = tr.insertCell(0);
          var td2 = tr.insertCell(1);
          var td3 = tr.insertCell(2);
          var td4 = tr.insertCell(3);
          var td5 = tr.insertCell(4);
          //6.通过单元格添加内容
          td1.innerHTML = bookName;
          td2.innerHTML = num;
          td3.innerHTML = '￥'+price;
          td4.innerHTML = num*price;
          td5.innerHTML = `<input type="button" value="修改数量" onclick="changeOper(this)" />
                           <input type="button" value="删除信息" onclick="delectOper(this)" />`;
          
        }
        //删除订单
        function delectOper(obj){//obj代表当前按钮
          //1.获取表格对象
          var table = $('.style-table');
          //2.获取当前按钮所在的下标 
          //通过obj.parentNode --> td parentNode --> tr  rowIndex  行下标
          var index = obj.parentNode.parentNode.rowIndex;
          //3.通过表格对象删除按钮所在的行
          table.deleteRow(index);
        }
        //修改数量
       function changeOper(obj){
        //根据按钮找到要修改的行号
        var index = obj.parentNode.parentNode.rowIndex;
        //获取表格对象
        var table = $('.style-table');
        //1.修改当前行的样式
        table.rows[index].className = 'active-row';
        if(obj.value == '修改数量'){
          //2.当前行的第2个单元格里面的内容要换成输入框
          //获取第2个单元格的内容
          var num = table.rows[index].cells[1].innerHTML;
          //修改单元格内容
          table.rows[index].cells[1].innerHTML = `<input type='text' value='${num}' class='modify'>`;
          //3.按钮里面的内容要换成“确定修改”
          obj.value = '确定修改';
        }else{
           //1.当前行的第2个单元格里面的输入框要换成普通的文本
           //获取用户输入的内容
           var num = table.rows[index].cells[1].children[0].value;
           //将输入框替换普通的文本
           table.rows[index].cells[1].innerHTML = num;
           //获取当前价格
           var price = table.rows[index].cells[2].innerHTML.substring(1);
           //修改总价
           table.rows[index].cells[3].innerHTML = num * price;
            //2.修改当前行的样式
          table.rows[index].className = '';
          //3.按钮里面的内容要换成“修改数量”
          obj.value = '修改数量';

        }
        

       
       }
      </script>
  </body>
</html>
